<template>
  <div class="nav">
    <div class="container">
      <el-row>
        <el-col :span="8">
          <router-link to="/" class="item">首页</router-link>
          <router-link to="/range" class="item">排行</router-link>
          <router-link to="/active" class="item">动态</router-link>
          <router-link to="/personal" class="item">个人中心</router-link>
        </el-col>
        <el-col :span="8">
          <el-input v-model="searchValue" placeholder="请输入搜索内容" clearable style="width: 200px">
            <el-button slot="append" icon="el-icon-search" @click="search()" />
          </el-input>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <router-link to="/register" class="item">注册</router-link>
          <router-link to="/login" class="item">登录</router-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',

  data() {
    return {
      searchValue: ''
    }
  },

  methods: {
    search() {
      console.log('搜索：' + this.searchValue)
    }
  }
}
</script>

<style scoped lang="less">
  .nav {
    padding: 15px 20px;
    background: black;
    color: #fff;
    position: fixed;
    z-index: 6000;
    width: 100%;

    .item {
      line-height: 32px;
      margin: 0 10px;
    }
  }
</style>
